<template>
  <RichTextEditor
      v-model="content"
      :upload-config="uploadConfig"
      @upload-success="handleUploadSuccess"
      @upload-error="handleUploadError"
  />
</template>

<script setup>
import { ref } from 'vue'
import RichTextEditor from '@/components/RichTextEditor/RichTextEditor.vue'

const content = ref('<p>初始内容</p>')

const uploadConfig = ref({
  url: 'https://api.example.com/upload',
  maxSize: 2 * 1024 * 1024, // 2MB
  fieldName: 'image',
  extraData: {
    token: 'your-upload-token',
    category: 'editor'
  },
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  urlField: 'data.url' // 根据实际响应结构调整
})

const handleUploadSuccess = ({ response, file }) => {
  console.log('上传成功:', response)
}

const handleUploadError = ({ error, file }) => {
  console.error('上传失败:', error.message)
  alert(`上传失败：${error.message}`)
}
</script>